<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="app">
    <button @click="callInstanceMethodFromVue">click me to call method!</button>
    <p v-my-directive="msg"></p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    let MyPlugin = {};
    MyPlugin.install = function (Vue, options) {
      // 1. 添加全局方法或 property
      Vue.myGlobalMethod = function () {
        console.log('The method from MyPlugin for Vue!');
      }

      // 2. 添加全局资源
      Vue.directive('my-directive', {
        bind(el, binding, vnode, oldVnode) {
          // 逻辑...
          el.textContent = binding.value.toUpperCase();
        }
      })

      // 3. 注入组件选项
      Vue.mixin({
        created: function () {
          // 逻辑...
        }
      })

      // 4. 添加实例方法
      Vue.prototype.$myMethod = function (methodOptions) {
        console.log('The method from MyPlugin for Vue instance!');
      }
    }
    // 为Vue安装这个插件
    Vue.use(MyPlugin);
    // 现在可以调用全局方法
    Vue.myGlobalMethod();
    const app = new Vue({
      el: "#app",
      data: {
        msg:'The value from plugin and apply toUpperCase method!'
      },
      methods: {
        callInstanceMethodFromVue(){
          this.$myMethod();
        }
      }
    })
  </script>
</body>

</html>